<template>
	<view>
		<view class='cart-box' v-if="cart.length !== 0">
			<!-- 收货地址 -->
			<my_address></my_address>
			
			<!-- 商品列表 -->
			<view class="cart-title">
				<uni-icons type="shop" size="24"></uni-icons>
				<text class="cart-title-text">购物车</text>
			</view>
			<view class="cart-list">
				<uni-swipe-action>
					<block v-for="(goods,index) in cart" :key="index">
						<uni-swipe-action-item :right-options="options" @click="cartGoodsItemDelete(goods)">
							<goods_item :goods="goods" :showRadio="showRadio" :showNum="showNum" @radioChange="radioChange" @numChange="numChange"></goods_item>
						</uni-swipe-action-item>
					</block>
				</uni-swipe-action>
			</view>
			<!-- 结算区域 -->
			<my_settle></my_settle>
		</view>
		<view class="empty-cart" v-else>
			<image src="/static/cart_empty@2x.png" mode=""></image>
			<text>空空如也~</text>
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations,mapGetters} from 'vuex'
	export default {
		data() {
			return {
				showRadio:true,
				showNum:true,
				options:[
					{
						text:'删除',
						style:{
							backgroundColor:'#c00000'
						}
					}
				]
			};
		},
		computed:{
			...mapState('cart_m',['cart']),
			...mapGetters('cart_m',['total']),
		},
		onLoad(){
			console.log(this.$store);
		},
		onShow(){
			this.setBadge();
		},
		methods:{
			...mapMutations('cart_m',['updateGoodsState','updateGoodsCount','removeGoodsById']),
			radioChange(goods_id_state){
				//调用mutations
				this.updateGoodsState(goods_id_state);
			},
			numChange(goods_id_count){
				console.log(goods_id_count);
				this.updateGoodsCount(goods_id_count);
				console.log(this.total);
				this.setBadge();
			},
			// 在tabBar 购物车上加数字
			setBadge(){
				// console.log(11);
				uni.setTabBarBadge({
					index:2,
					//隐式转换
					text:this.total + ''
				})
			},
			//删除购物车内的商品
			cartGoodsItemDelete(goods){
				console.log(goods);
				this.removeGoodsById(goods.goods_id);
				this.setBadge();
			}
		}
	}
</script>

<style lang="scss">
.cart-box{
	padding-bottom: 50px;
	
	.cart-title{
		height: 50px;
		display: flex;
		align-items: center;
		padding: 0 10px;
		border-bottom: 1px solid #ebebeb;
		
		.cart-title-text{
			font-size: 16px;
			padding-left: 10px;
		}
	}
	.cart-list{
		
	}
}
.empty-cart{
	height: 750rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	image{
		width: 100px;
		height: 100px;
		margin-bottom: 10px;
	}
}
</style>
